<template>
  <div>
    <div class="split-pane min-h-[500px]">
      <splitpane :splitSet="settingLR">
        <template #paneL>
          <!-- 自定义左侧面板的内容 -->
          <div class="pr-[16px] h-full min-h-[500px]">
            <treeList ref="treeListRef" :treeProops="treeProops" :treeEvents="treeEvents" :pageShow="false"
              :inputShow="false" />
          </div>

        </template>
        <template #paneR>
          <div class="pl-[20px]">
            <div :style="{ height: 'calc(800px)', width: 'calc(100%)' }">
              <clickMap ref="clickMapRef" v-bind="$attrs" />
            </div>
          </div>
        </template>
      </splitpane>
    </div>

  </div>

</template>
<script setup lang="ts">
import treeList from '@/components/treeList/treeList.vue'
import splitpane, { ContextProps } from "@/components/ReSplitPane";
import { facilitbuildings } from "@/api/operate/timed-tasks/index";
import clickMap from '@/components/clickMap/marker.vue'
import type { infoType } from '@/api/operate/project-management/projectManagement/facility-management/index';
type FormProps = {
  formInline: infoType,
}
const props = withDefaults(defineProps<FormProps>(), {
  formInline: () => ({} as infoType),

});

const treeListRef = ref();//树形列表ref
const projectList = ref([]);//侧边栏数据
const drawingId = ref();
const isLoading = ref(true)
const settingLR: ContextProps = reactive({
  minPercent: 17,
  maxPercent: 17,
  defaultPercent: 17,
  split: "vertical"
});

const clickMapRef = ref()
const setFixedMarkers = async (markerArr) => {
  nextTick(() => {
    clickMapRef.value.setFixedMarkers(markerArr)
  })
}
console.log("props.formInline", props.formInline);
onMounted(() => {

  loadProjectList().then(() => {
    if (props.formInline.drawingId !== null && props.formInline.drawingId) {
      treeListRef.value.getTreeRef().setCurrentKey(props.formInline.buildingId + '-' + props.formInline.drawingId);
      treeListRef.value.getTreeRef().setExpandedKeys([props.formInline.buildingId])
    }else{
      treeListRef.value.getTreeRef().setCurrentKey('01');
    }
  })
})


const propsL = {
  label: "buildingName",
  value: "buildingId",
  children: "children",
  isLeaf: "isLeaf"
};
//获取数据

const loadProjectList = () => {
  return new Promise((resolve, reject) => {
    isLoading.value = true;
    facilitbuildings()
      .then(res => {
        let arrs = [
          {
            buildingId: "01",
            projectId: res.result.projectId,
            buildingName: "项目平面",
            children: []
          }
        ];
        res.result.buildingInfo.unshift(...arrs);
        res.result.buildingInfo.forEach(item => {
          if (item.children.length > 0) {
            item.children.forEach(item1 => {
              // item1.buildingId = item1.drawingId + "-1" + item.buildingId;
              item1.buildingId = item.buildingId + '-' + item1.drawingId;
              item1.buildingName = item1.drawingName;
            });
          }


        });
        projectList.value = res.result.buildingInfo;
      })
      .finally(() => {
        isLoading.value = false;
        resolve('');
      });
  });
};
const handleNodeClick = data => {
  // data.buildingId = props.formInline.childrenbuilding
  nextTick(() => {
    treeListRef.value.getTreeRef().setCurrentKey(props.formInline.childrenbuilding);
  })



};
const filterMethod = (query, node) => {
  return node.buildingName.includes(query);
};
const treeProops = ref({
  props: propsL,
  data: projectList,
  "item-size": 46,
  "filter-method": filterMethod,
  nodeKey: "buildingId",
  "highlight-current": true,

});
const treeEvents = {
  nodeClick: handleNodeClick,

};





defineExpose({
  setFixedMarkers
})
</script>
<style lang="scss" scoped>
.split-pane {
  width: 100%;

  ::v-deep(.el-tree-node:focus > .el-tree-node__content) {
    background-color: rgba($color: #000000, $alpha: 0)
  }
}
</style>